<template>
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-800">用户来源分布</h3>
      <div class="text-sm text-gray-500">
        <a-button type="link"
                  size="small">
          <Icon type="download" /> 导出
        </a-button>
      </div>
    </div>
    <div class="flex">
      <div class="w-1/2">
        <div class="bg-gray-100 rounded-lg h-full flex items-center justify-center">
          <p class="text-gray-400">用户来源饼图</p>
        </div>
      </div>
      <div class="w-1/2 flex flex-col justify-center pl-4">
        <SourceDistributionItem name="Web端"
                                value="45%"
                                color="blue" />
        <SourceDistributionItem name="移动应用"
                                value="32%"
                                color="green" />
        <SourceDistributionItem name="API接口"
                                value="18%"
                                color="purple" />
        <SourceDistributionItem name="其他"
                                value="5%"
                                color="gray" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 组件逻辑
</script>